---
import { formatList } from "astro/dist/runtime/server/render/util";
import dayjs from "dayjs";

export interface Props {
  post: any;
}

const { post } = Astro.props;
---
<a
  href={`/blog?post=${encodeURIComponent(JSON.stringify(post.id))}`}
  class="transition-all duration-75 ease-in-out h-full block relative top-0 hover:-top-2 shadow-lg hover:shadow-xl bg-white rounded-xl overflow-hidden"
  data-test="article-card"
>
  <img
    class="squiggle"
    src={post.hero}
    alt={post.title}
    width="360"
    height="192"
  />
  <div class="py-6 px-8">
    <h2 class="font-bold text-2xl leading-tight">
      {post.title}
      <button></button>
    </h2>
    <p class="text-xs text-gray-600 mt-4 flex items-center">
      {dayjs(post.update_at).startOf("day").format("YYYY-MM-DD")}
    </p>
    <p class="text-xs text-gray-600 mt-4 flex items-center">
      浏览量: {post.views}
    </p>
  </div>
</a>

<style>
  img {
    width: 100%;
    aspect-ratio: 15/7;
    object-fit: cover;
  }
</style>
